<template>
    <div id="app">

        <div style="height:100%;">
            <transition :name="transitionName">
                <keep-alive>
                    <router-view class="child-view"></router-view>
                </keep-alive>
            </transition>
        </div>
        <!--    <transition mode="out-in">-->
        <!--      <router-view class="center"></router-view>-->
        <!--    </transition>-->
    </div>
</template>

<script>
    import {Group, Cell, Tabbar, TabbarItem, Swiper, SwiperItem, ViewBox, XHeader, CellBox} from 'vux'
    export default {
        components: {
            Group,
            Cell,
            Tabbar,
            TabbarItem,
            Swiper,
            SwiperItem,
            ViewBox,
            XHeader,
            CellBox
        },
        data () {
            return {
                transitionName: ''
            }
        },
        watch: {
            $route (to, from) {
                if (to.name === 'Home') {
                    this.transitionName = 'leftin'
                    return
                }
                this.transitionName = 'rightin'
            }
        },
        name: 'app'
    }
</script>

<style lang="less">
    @import '~vux/src/styles/reset.less';

    body {
        background-color: rgba(254, 244, 237, 0.29);
        position: absolute;
        height: 100%;
        width: 100%;
        overflow:hidden;
    }
    .child-view {
        position: absolute;
        width: 100%;
        height: 100%;
        transition: all .5s ease;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
    }
    .rightin-enter,
    .leftin-leave-active {
        opacity: 0;
        transform: translate3d(50% 0, 0);
        -webkit-transform: translate3d(50%, 0, 0);
        -moz-transform: translate3d(50%, 0, 0);
    }
    .leftin-enter,
    .rightin-leave-active {
        opacity: 0;
        transform: translate3d(-50% 0, 0);
        -webkit-transform: translate3d(-50%, 0, 0);
        -moz-transform: translate3d(-50%, 0, 0);
    }

</style>
